import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

// @Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据
@Component({
  // selector— 组件的选择器（CSS 元素选择器）
  selector: 'heroe-component',
  // templateUrl— 组件模板文件的位置。
  templateUrl: './heroes.component.html',
  // styleUrls— 组件私有 CSS 样式表文件的位置。
  styleUrls: ['./heroes.component.css']
})
// export 这个组件类，以便在其它地方（比如 AppModule）导入它。
export class HeroesComponent implements OnInit {

  hero1: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  heroes = HEROES;

  constructor() { }

  ngOnInit() {
  }

  selectedHero: Hero;
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}
